import React from "react";

interface UserCardProps{
    user: NicknameData;
};
function UserCard(props: UserCardProps){
    const { user } = props;
    return (
        <li className="list-group-item d-flex justify-content-between align-items-center bg-dark"
            style={{cursor: 'pointer'}}
        >
            {user.nickname}
            {/* <span className="badge badge-primary badge-pill">0</span> */}
        </li>
    );
}

interface UserListProps{
    userList: NicknameData[];
};
function UserList(props: UserListProps){

    const { userList } = props;

    return (
        <ul className="list-group">
            {userList.map(
                item => <UserCard key={item.userId} user={item} />
            )}
        </ul>
    );
}

export default UserList;